<template>
	<div class="page">
		<div class="page-content">
			<section class="section-1">
				<div class="banner">
					<van-swipe :autoplay="3000" :show-indicators="false" v-if="bannerList.length > 0" @change="onChange">
						<van-swipe-item v-for="(image, index) in bannerList" :key="index">
							<img v-lazy="image" />
						</van-swipe-item>
						<template #indicator>
							<div class="banner-num">
								{{ current + 1 }}/2
							</div>
						</template>
					</van-swipe>
				</div>
			</section>
			<section class="section-2">
				<div class="goods">
					<div class="goods-box">
						<div class="goods-price">
							<i>￥</i>
							<span>0</span>
							<p>原价:￥6.80</p>
						</div>
						<div class="goods-num">剩余<span>15</span>键</div>
					</div>
					<div class="goods-content">60包抽纸家用实惠装整箱卫生纸巾面巾餐巾纸抽婴儿原木抽纸巾漫花</div>
					<div class="goods-paynum">2515人已领</div>
				</div>
			</section>
			<section class="section-3">
				<div class="recommend">
					<div class="titles">
						<i></i>
						<p>推荐语</p>
					</div>
					<div class="recommend-content">爆款抽纸，镇店之宝！植护原生木浆抽纸无荧光剂，柔韧吸水不易破，擦拭无尘屑，皮肤不刺激，手慢无！</div>
				</div>
			</section>
			<section class="section-4">
				<div class="detail">
					<div class="titles">
						<i></i>
						<p>商品详情</p>
					</div>
					<div class="detail-content">
						<pre>阿萨斯大大大所大所多啊啊啊</pre>
					</div>
					<div class="detail-btn">
						<p>点击查看</p><span></span>
					</div>
				</div>
			</section>
			<section class="section-5">
				<div class="list">
					<div class="titles">
						<i></i>
						<p>别人在抢</p>
					</div>
					<div class="list-content">
						<div class="list-content--item">
							<div class="item-img"><img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt=""></div>
							<div class="item-info">
								<div class="item-price">
									<p>￥<i>0</i></p><span>ddasd</span>
								</div>
								<div class="item-paynum">65784人已抢</div>
							</div>
							<div class="item-desc">斑布竹浆本色家用抽纸实惠装擦手餐巾软抽卫生纸巾100抽24包整箱</div>
						</div>
						<div class="list-content--item">
							<div class="item-img"><img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt=""></div>
							<div class="item-info">
								<div class="item-price">
									<p>￥<i>0</i></p><span>ddasd</span>
								</div>
								<div class="item-paynum">65784人已抢</div>
							</div>
							<div class="item-desc">斑布竹浆本色家用抽纸实惠装擦手餐巾软抽卫生纸巾100抽24包整箱</div>
						</div>
						<div class="list-content--item">
							<div class="item-img"><img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt=""></div>
							<div class="item-info">
								<div class="item-price">
									<p>￥<i>0</i></p><span>ddasd</span>
								</div>
								<div class="item-paynum">65784人已抢</div>
							</div>
							<div class="item-desc">斑布竹浆本色家用抽纸实惠装擦手餐巾软抽卫生纸巾100抽24包整箱</div>
						</div>
					</div>
				</div>
			</section>
			<div style="height: 60px;"></div>
			<div class="footer">
				<div class="footer-icon">
					<i class="icon iconfont icon-home"></i>
					<p>首页</p>
				</div>
				<div class="footer-btn" @click="goStep()">我要抢</div>
			</div>
			<div class="back" @click="back()">
				<i class="icon iconfont icon-left"></i>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import {
		Swipe,
		SwipeItem,
		Lazyload
	} from 'vant';

	Vue.use(Swipe);
	Vue.use(SwipeItem);
	Vue.use(Lazyload);
	export default {
		components: {

		},
		data() {
			return {
				bannerList: [
					'http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg',
					'http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg',
				],
				current: 0,
			}
		},

		computed: {

		},
		created() {

		},
		mounted() {

		},

		methods: {
			goStep() {
				this.$router.push('/goods/step');
			},
			back() {
				this.$router.back();
			},
			onChange(index) {
				this.current = index;
			},
		}
	};
</script>

<style lang="less" scoped>
	.page {
		background: #F9F9F9;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.back {
		width: 30px;
		height: 30px;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 15px;
		left: 15px;
		border-radius: 50%;

		i {
			font-size: 16px;
			color: #FFFFFF;
		}
	}

	.titles {
		display: flex;
		align-items: center;
		height: 20px;

		i {
			width: 5px;
			height: 14px;
			background: #FF0000;
		}

		p {
			font-size: 14px;
			color: #333333;
			margin-left: 10px;
		}
	}

	.section-1 {
		.banner {
			width: 375px;
			position: relative;

			.banner-num {
				width: 45px;
				height: 25px;
				background: rgba(51, 51, 51, 0.3);

				border-radius: 12px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 12px;
				color: #ffffff;
				position: absolute;
				bottom: 10px;
				right: 10px;
			}

			img {
				width: 100%;
			}
		}
	}

	.section-2 {

		.goods {
			background: #FFFFFF;
			width: 345px;
			padding: 15px;

			.goods-box {

				display: flex;
				justify-content: space-between;

				.goods-price {
					width: 60%;

					i {
						font-size: 12px;
						color: #FF0000;
					}

					span {
						font-size: 26px;
						color: #FF0000;
						margin-left: 9px;
					}

					p {
						display: inline-block;
						font-size: 11px;
						color: #EEEEEE;
						margin-left: 11px;
						text-decoration: line-through;
					}
				}

				.goods-num {
					width: 40%;
					font-size: 12px;
					color: #FF0000;
					text-align: right;

					span {
						margin-left: 10px;
						margin-right: 5px;
						font-size: 26px;
						color: #FF0000;
					}

				}
			}

			.goods-content {
				margin-top: 13px;
				font-size: 14px;
				font-weight: bold;
				color: #666666;
				line-height: 18px;
			}

			.goods-paynum {
				margin-top: 5px;
				font-size: 9px;
				color: #999999;
			}
		}
	}

	.section-3 {
		margin-top: 10px;

		.recommend {
			background: #FFFFFF;
			padding: 15px;
			width: 345px;

			.recommend-content {
				margin-top: 9px;
				font-size: 12px;
				color: #666666;
				line-height: 18px;

			}
		}
	}

	.section-4 {
		margin-top: 10px;

		.detail {
			background: #FFFFFF;
			padding: 15px;
			width: 345px;

			.detail-content {
				margin-top: 9px;
				font-size: 12px;
				color: #666666;
				line-height: 18px;

			}

			.detail-btn {
				margin-top: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				p {
					font-size: 11px;
					color: #980303;
					text-align: center;
				}

				span {
					margin-left: 5px;
					display: inline-block;
					width: 12px;
					height: 12px;
					background: url(../../assets/images/goods/down-circle@2x.png);
					background-size: 100%;
				}
			}
		}
	}

	.section-5 {
		margin-top: 10px;

		.list {
			background: #FFFFFF;
			padding: 15px;
			width: 345px;

			.list-content {
				display: flex;
				flex-wrap: wrap;
				margin-top: 5px;
				justify-content: space-between;

				.list-content--item {
					width: 165px;
					margin-bottom: 5px;

					.item-img {
						width: 165px;
						height: 165px;

						img {
							width: 165px;
							height: 165px;
						}
					}

					.item-info {
						margin-top: 5px;
						display: flex;

						.item-price {
							width: 50%;
							display: flex;

							p {

								font-size: 12px;
								color: #FC0303;

								i {
									margin-left: 5px;
									font-size: 16px;
									font-weight: bold;
									color: #FC0303;
								}
							}

							span {
								display: flex;
								justify-content: flex-end;
								align-items: center;
								font-size: 11px;
								color: #EEEEEE;
								margin-left: 10px;
								text-decoration: line-through
							}

						}

						.item-paynum {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							width: 50%;
							font-size: 11px;
							color: #FC0303;
						}
					}

					.item-desc {
						margin-top: 5px;
						font-size: 11px;
						color: #333333;
						line-height: 14px;
					}
				}
			}
		}
	}

	.footer {
		width: 375px;
		height: 50px;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 9;

		.footer-icon {
			height: 50px;
			width: 108px;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			i {
				color: #999999;
				font-size: 18px;
			}

			p {
				margin-top: 2px;
				font-size: 11px;
				color: #999999;
			}
		}

		.footer-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 266px;
			height: 40px;
			background: #FC0303;
			border-radius: 20px;
			font-size: 16px;
			color: #FFFFFF;
			position: absolute;
			right: 15px;
			top: 5px;
		}
	}
</style>
